<template>
  <d2-container>
    <div slot="header">
      <crud-search
        ref="search"
        :options="crud.searchOptions"
        @submit="handleSearch"
      />
      <el-button-group>
        <el-button size="small" type="primary" @click="addRow"
        ><i class="el-icon-plus"></i> 新增
        </el-button
        >
      </el-button-group>
      <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
    </div>
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @rk="getRepos"
    ></d2-crud-x>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      @closed="handleClose"
    >
      <el-form
        ref="form"
        label-position="right"
        label-width="500"
        :model="form"
      >
        <el-form-item label="入库仓库">
          <el-select v-model="form.repository" placeholder="请选择">
            <el-option
              v-for="item in repositoryList"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经办人">
          <el-input style="width: 200px" v-model="form.principal"></el-input>
        </el-form-item>
        <el-form-item label="入库时间">
          <el-date-picker
            v-model="form.inDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="ckVisible"
      width="30%"
      @closed="handleClose"
    >
      <el-form ref="form1" label-position="left" :model="ckForm">
        <el-form-item label="经办人">
          <el-input style="width: 200px" v-model="ckForm.principal"></el-input>
        </el-form-item>
        <el-form-item label="认领人">
          <el-input style="width: 200px" v-model="ckForm.claimer"></el-input>
        </el-form-item>
        <el-form-item label="认领部门">
          <el-input style="width: 200px" v-model="ckForm.claimeDept"></el-input>
        </el-form-item>
        <el-form-item label="出库时间">
          <el-date-picker
            v-model="ckForm.outDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>
<script>
import {crudOptions} from './crud'
import {d2CrudPlus} from 'd2-crud-plus'
import util from '@/libs/util'
import api from './api'

export default {
  mixins: [d2CrudPlus.crud],
  data() {
    return {
      dialogVisible: false,
      ckVisible: false,
      form: {
        repository: '',
        bloodId: '',
        principal: '',
        inDate: ''
      },
      ckForm: {
        outDate: '',
        blood: '',
        claimer: '',
        claimeDept: '',
        principal: ''
      },
      title: '',
      repositoryList: [],
      // 仓储情况
      reStatus: ''
    }
  },
  async mounted() {
    await this.getRepositoryList()
  },
  methods: {
    getCrudOptions() {
      return crudOptions(this)
    },
    pageRequest(query) {
      return api.getBloodList(query)
    },
    addRequest(row) {
      return api.addBlood(row)
    },
    updateRequest(row) {
      return api.updateBlood(row)
    },
    delRequest(row) {
      return api.deleteBlood(row._id)
    },
    initialForm() {
      this.form = {
        bloodId: '',
        principal: '',
        inDate: ''
      }
      this.ckForm = {
        outDate: '',
        blood: '',
        claimer: '',
        claimeDept: '',
        principal: ''
      }
    },
    async getRepositoryList() {
      const {data, msg, code} = await api.getRepositoryList()
      if (code === 0) {
        this.repositoryList = data.data
      } else {
        this.$message.error(msg)
      }
    },
    getRepos($event) {
      // 通过状态判断入库还是出库
      this.form.bloodId = $event.row._id
      this.ckForm.blood = $event.row._id
      if ($event.row.isRepos === 0 || !$event.row.isRepos) {
        this.dialogVisible = true
        this.title = '入库'
      } else if ($event.row.isRepos === 1) {
        this.ckVisible = true
        this.title = '出库'
      }
      this.reStatus = $event.row.isRepos
      // console.log($event)
    },
    handleClose() {
      // this.$refs.form.resetFields()
      // console.log('this.$refs', this.$refs)
      // this.$refs.form1.resetFields()
      this.initialForm()
    },
    async handleSubmit() {
      this.form.inDate = util.formatDate(this.form.inDate)
      // console.log('before', this.ckForm.outDate)
      this.ckForm.outDate = util.formatDate(this.ckForm.outDate)
      // console.log('after', this.ckForm.outDate)
      if (this.reStatus === 0) {
        const {code} = await api.getInRepository(this.form)
        if (code === 0) {
          this.$message.success('入库成功')
          this.dialogVisible = false
        }
        this._OnCreated()
      } else if (this.reStatus === 1) {
        console.log('ckForm', this.ckForm)
        const {code} = await api.getOutRepository(this.ckForm)
        if (code === 0) {
          this.$message.success('出库成功')
          this.ckVisible = false
        }
        this._OnCreated()
      } else if (this.reStatus === 2) {
        // 该血液已出库
        this.$message.info('该血液已经出库')
      }
      // console.log(util.formatDate(this.form.inDate))
    }
  }
}
</script>
<style>
</style>
